<!--  -->
<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane class="flex justify-center" label="描述" name="1">
        <img v-if="goodsData.pcId === 1" class="cur-img" src="../../assets/image/description_dog.webp" />
        <img v-else-if="goodsData.pcId === 3" class="cur-img" src="../../assets/image/description_cat.webp" />
        <img v-else-if="goodsData.pcId === 2" class="cur-img" src="../../assets/image/description_supplies.webp" />
      </el-tab-pane>

      <el-tab-pane label="其他信息" name="2">
        <div class="goods-data">
          <div class="item flex">
            <span class="label w-[150px] font-bold">名称</span>
            <span class="value flex-1">{{ goodsData.goodsName }}</span>
          </div>
          <div class="item flex">
            <span class="label w-[150px] font-bold">状态</span>
            <span class="value flex-1">{{ goodsData.pState }}</span>
          </div>
          <div v-for="(value,key) in goodsData.spec" class="item flex">
            <span class="label w-[150px] font-bold">{{key}}</span>
            <span class="value flex-1">{{ value.join(',') }}</span>
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="用户评价" name="3">
        <div class="c-list">
          <div v-for="i in 4" class="c-item flex">
            <img class="w-[60px] h-[60px] mr-4 avatar" src="https://img2.baidu.com/it/u=735986437,2878859787&fm=253&fmt=auto&app=138&f=PNG?w=500&h=501" alt="">
            <div class="flex-1">
              <div class="mb-2">用户****554</div>
              <div>很可爱的狗狗, 使我的坚果旋转</div>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang='ts' setup>
import { ref } from 'vue'
const activeName = ref('1')
const props = defineProps(['goodsData'])

</script>
<style scoped>
.goods-data .item {
  font-size: 14px;
  padding: 10px 0;
  background: #fff;
  color: #3e4d57;
  border-top: 1px solid #e6e8e9;
}
.goods-data .item .label {
  text-align: center;
}
.goods-data .item:nth-child(2n) {
  background: #f5f6f6;
}

.c-list .c-item .avatar {
  border-radius: 50%;
}
.c-list .c-item{
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f1f1f1;
}

:deep(.el-tabs__item.is-active) {
    color: #e23e3e;
}

:deep(.el-tabs__active-bar) {
    background-color: #e23e3e;
}

:deep(.el-tabs__item:hover) {
    color: #e23e3e;
}

:deep(.el-tabs__item) {
  font-size: 1rem;
  font-weight: 1000;
}
</style>
